// 权限控制
import router, { asyncRoutes } from "@/router"
import store from '@/store'
import NProgress from 'nprogress' // progress bar
import 'nprogress/nprogress.css' // progress bar sty
import getPageTitle from '@/utils/get-page-title'
// NProgress.start() ---> 添加小进度条
// NProgress.done()  ---> 删除小进度条

const whiteList = ['/login', '/404']
router.beforeEach(async (to, from, next) => {
  NProgress.start() // 页面加载时触发小进度条
  const token = store.state.user.token
  console.log('页面在之前一定会经过这里')
  console.log('去哪里', to)
  console.log('从哪里来', from)
  // 动态设置网页的标题
  // document.title=`人力资源系统-${to.meta.title}`
  document.title = getPageTitle(to.meta.title)
  if (token) {
    // 已经登录
    console.log('已经登录')
    if (to.path === '/login') {
      console.log('您已经登录了不需要再次登录,跳转到首页')
      next('/') // 如果next(指定了路径),那么页面跳转时就不会经过 router.afterEach
      NProgress.done() // 关闭进度条
    } else {
      console.log('已经登录去别的页面,放行')
      // 判断vuex中是否存储过用户信息, 如果已经存储了,就不需要再获取用户信息了
      if (!store.state.user.userInfo.userId) {
        // 1. 触发actions中的函数 ,获取用户信息储存在vuex中
        // await 保证后面的异步函数执行完成才跳转页面
        // 为了保证获取用户信息成功后才开始跳转页面
        const menus = await store.dispatch('user/getUserInfo')
        // 1. 需要获取到用户的页面级别的权限信息
        console.log('menus', menus);
        // 2. 根据权限信息动态添加路由器和渲染左侧菜单
        // - 动态添加路由
        const fiterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name)
        })
        router.addRoutes(fiterRoutes) // 动态添加路由是一个异步的过程, 还没加载完成就直接跳转了页面, 出现白屏的问题
        router.addRoutes([{ path: '*', redirect: '/404', hidden: true }])
        store.commit('menus/updateMenus', fiterRoutes)
        // 动态路由页面加载完成, 重新进入页面
        return next({ ...to, replace: true })
      }
      next() // 如果next(没有指定路径),直接放行, 跳转完毕一定会经过 router.afterEach
    }
  } else {
    console.log('没有登录')
    if (whiteList.includes(to.path)) {
      console.log('您拥有白名单,放行')
      next()
    } else {
      console.log('您还没有登录请先登录再访问页面!')
      next('/login')
      NProgress.done() // 关闭进度条
    }
  }
})

// 如何关闭进度条 NProgress.done() ---> 什么时候关闭??? 页面跳转完毕
// 怎么确定页面跳转完毕  router.afterEach() 页面跳转完毕的回调函数
router.afterEach(() => {
  NProgress.done() // 页面跳转完毕关闭进度条
})
